<!--
 * @Author: fanzejie
 * @Description: 请填写简介
-->
<template>
  <div class="lineChart-container">
    <el-row>
      <!-- <el-col :span="2"><h3 class="title">折线图</h3></el-col> -->
      <el-col :span="22"
        ><highcharts
          :options="chartOptions"
          class="onlineHighcharts"
        ></highcharts
      ></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    chartTitle: Object,
    chartSeries: Object,
  },
  name: "lineChart",
  data() {
    return {
      chartOptions: {
        title: {
          text: this.chartTitle,
        },
        chart: {
          zoomType: "x",
          panning: true, //开启平移
          panKey: "shift", //按住shift鼠标拖动平移
          selectionMarkerFill: "rgba(0,0,0, 0.2)", //选中时区域的背景填充
          resetZoomButton: {
            // 清空选择区的按钮定位
            position: {
              align: "right", // by default
              verticalAlign: "top", // by default
              x: 0,
              y: -30,
            },
            // 按钮样式
            theme: {
              fill: "white",
              stroke: "silver",
              r: 0,
              states: {
                hover: {
                  fill: "#41739D",
                  style: {
                    color: "white",
                  },
                },
              },
            },
          },
        },
        legend: {
          enabled: false,
        },
        xAxis: {
          type: "datetime",
          dateTimeLabelFormats: {
            millisecond: "%H:%M:%S.%L",
            second: "%H:%M:%S",
            minute: "%H:%M",
            hour: "%H:%M",
            day: "%m-%d",
            week: "%m-%d",
            month: "%Y-%m",
            year: "%Y",
          },
          minTickInterval: 60 * 1000, //设置缩放时的最小时间间隔
        },
        tooltip: {
          dateTimeLabelFormats: {
            millisecond: "%H:%M:%S.%L",
            second: "%H:%M:%S",
            minute: "%H:%M",
            hour: "%H:%M",
            day: "%Y-%m-%d",
            week: "%m-%d",
            month: "%Y-%m",
            year: "%Y",
          },
          shared: true,
        },

        series: [],
      },
    };
  },

  components: {},
  methods: {},
  mounted() {
    this.chartOptions.series = this.chartSeries;
  },
};
</script>

<style scoped></style>
